<template>
  <div style="padding:3%">
    <el-row>
      <el-col :span="14">
        <el-form :model="form" ref="form" label-width="200px" label-suffix="：">
          <el-form-item label="(点击)更新头像">
              <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="request">
                <img v-if="imageUrl" style="width:150px" :src="imageUrl" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
          <el-form-item v-for="(v,k,i) in form" :label="labels[i]" :key="i" v-if="k!=='netGridMemberID'" :prop="k">
            <el-cascader v-if="k=='netGridID'" :options="NetGridTree" v-model="selectOptions" :props="props" @change="handleChange">
            </el-cascader>
            <el-select v-else-if="k=='ethnicity'" v-model="form[k]">
              <el-option v-for="(v,i) in EthnicityType" :key="i" :value="v.ethnicity" :label="v.ethnicityName"></el-option>
            </el-select>
            <el-select v-else-if="k=='politics'" v-model="form[k]">
              <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
            </el-select>
            <el-select v-else-if="k=='sex'" v-model="form[k]">
              <el-option v-for="(v,i) in sexs" :key="i" :value="v.v" :label="v.l"></el-option>
            </el-select>
            <el-select v-else-if="k=='education'" v-model="form[k]" placeholder="请选择学历">
              <el-option v-for="v of EducationType" :key="v.id" :label="v.educationTypeName" :value="v.education"></el-option>
            </el-select>
            <el-select v-else-if="k=='position'" v-model="form[k]" placeholder="请选择职务">
              <el-option v-for="(v,i) in options" :key="i" :value="v.value" :label="v.label"></el-option>
            </el-select>
            <el-date-picker v-else-if="k=='birthDate'" @change="changeDate" v-model="form[k]"></el-date-picker>
            <el-input v-else v-model="form[k]" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateRecord">更新</el-button>
            <el-button type="warning" @click="$router.push('index')">返回</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as api from "@/api/netGridManage";
  import * as api2 from '@/api/zonghezhili/duiwujianshe'
  export default {
    data() {
      return {
        imageUrl: '',
        num: 4,
        file: null,
        sexs: [
          {
            v:  1,
            l: '男性'
          },
          {
            v: 2,
            l: '女性'
          }
        ],
        form: {
          // netGridmemberID:'',// bigint(20) nOT nULL AUTO_IncRemenT,
          netGridID: '', // bigint(20) DeFAULT nULL,
          name: '', // varchar(50) DeFAULT nULL,
          sex: '', // int(11) DeFAULT nULL cOmmenT '性别编码表',
          position: '', // varchar(20) DeFAULT nULL cOmmenT '职位',
          ethnicity: '', // varchar(20) DeFAULT nULL cOmmenT '民族',
          politics: '', // varchar(20) DeFAULT nULL cOmmenT '政治面貌',
          certID: '', // varchar(18) DeFAULT nULL,
          birthDate: '', // date DeFAULT nULL,
          education: '', // varchar(10) DeFAULT nULL cOmmenT '学历',
          mobileTel: '', // varchar(18) DeFAULT nULL cOmmenT '移动电话',
          fixedTel: '', // varchar(18) DeFAULT nULL cOmmenT '固定电话',
        },
        labels: ["编号", "所属网格", "成员姓名", "性别", "民族", "政治面貌", "身份证", "出生日期", "学历", "移动电话", "固定电话", "职位"],
        selectOptions: [],
        options: [{
            value: '网格长',
            label: '网格长'
          },
          {
            value: '党小组长',
            label: '党小组长'
          },
          {
            value: '警长',
            label: '警长'
          },
          {
            value: '网格员',
            label: '网格员'
          },
          {
            value: '协理员',
            label: '协理员'
          },
        ],
        props: {
          value: 'netGridID',
          label: 'netGridName',
          children: 'children'
        },
        MyNetGrid: [],
        EthnicityType: [],
        Politics: [],
        NetGridTree: [],
        selectedOptions: [],
        EducationType: []
      };
    },
    methods: {
      changeVal(val) {
        this.form.netGridID = val[1]
      },
      changeDate(val) {
        this.form.birthDate = val
      },
      request(event) {
        this.file = event.file
        var read = new FileReader();
        read.readAsDataURL(this.file);
        read.onload = (e) => {
          this.imageUrl = e.target.result;
        };
      },
      handleChange(value) {
        this.form.netGridID = value[1]
      },
      reset() {
        for (var key in this.form) {
          this.form[key] = ''
        }
        this.file = null
        this.imageUrl = null
      },
      updateRecord() {
        let param = new FormData();
        // if(this.file!=null)
        param.append('file', this.file)
        param.append('netGridMember', JSON.stringify(this.form))
        api.update(param).then(res => {
          if (res.data) {
            this.$message({
              type: "success",
              message: "更新成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      },
      P1() {
        return new Promise((resolve, reject) => {
          api.getAllNetGrid().then(res => {
            this.NetGridTree = res.data
            for (let i = 0; i < this.NetGridTree.length; i++) {
              if (this.NetGridTree[i].fatherNetGridID == -1) {
                this.NetGridTree[i].fatherNetGridName = '开发区管委会'
                this.NetGridTree[i].children = []
              }
            }
            let root = this.NetGridTree.filter(item => {
              if (item.fatherNetGridID == -1) {
                return item
              }
            })
            root.filter(item => {
              this.NetGridTree.filter(x => {
                if (x.fatherNetGridID == item.netGridID) {
                  item.children.push(x)
                }
              })
            })
            this.NetGridTree = root
            this.MyNetGrid = res.data

            resolve(res.data)
          })
        })
      },
      P2(data) {
        return new Promise((resolve, reject) => {
          api2.fetchServedPersonManageTypes().then(res => {
            this.EthnicityType = res.data.codeEthnicityType
            this.Politics = res.data.codePoliticsType
            this.EducationType = res.data.codeEducationTypeMapper
            resolve(data)
          })
        })
      },
      P3(data) {
        return new Promise((resolve, reject) => {
          let queryId = this.$route.query.id
          api.getEditInfo(queryId).then(res => {
            this.form = res.data.memberDetail
            this.imageUrl = res.data.photoPath
            let fa = data.filter(item => {
              if (item.netGridID == this.form.netGridID) {
                return item.fatherNetGridID
              }
            })
            this.selectOptions = [fa[0].fatherNetGridID, fa[0].netGridID]
            if (this.form.ethnicity != null)
              this.form.ethnicity = parseInt(this.form.ethnicity)
          })
          resolve()
        })
      }
    },
    created() {
      this.P1().then(this.P2).then(this.P3)
    }
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

